<template>
	<view class="warp">
		<view class="content title">
			标题：{{info.ntitle}}
		</view>
		<view class="content time">
			时间：{{info.ntime}}
		</view>
		<view class="content">
			内容：
			<!-- #ifndef H5 -->
							<text class='copy' @tap='copy'>复制</text>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<text class='copy copy-data' :data-clipboard-text="info.ncontent">复制</text>
							<!-- #endif -->
			
		</view>
		<view class="content" v-html="info.ncontent"></view>
	</view>
</template>

<script>
	import Clipboard from 'clipboard';
	import { netNoticeDetail } from '@/api/clues.js'
	export default{
		data() {
			return {
				info:{},
				id:''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
			 
		},
		onShow() {
			this.getDetail()
		},
		methods:{
			getDetail() {
				netNoticeDetail({id:this.id}).then(res=>{
					this.info = res.data
				})
			}, 
			// #ifndef H5
			copy: function() {
				let that = this;
				uni.setClipboardData({
					data: this.info.ntitle+"\r\n" +this.info.ncontent,
				    success: () => {
				        uni.showToast({
				        	title:'标题和内容已复制，请粘贴',
				        	icon:'none'
				        }) 
				    }
				});
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.copy {
		font-size: 20rpx;
		color: #333;
		border-radius: 20rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}
	.warp{
		padding:20rpx 24rpx;
		.content{
			font-size:28rpx;
			color:#666;
			line-height: 45rpx;
		}
		.title{
			font-size:32rpx;
			color:#333;
		}
		.time{
			color:#999;
			font-size:26rpx;
		}
	}
</style>
